import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { Pagination } from 'antd'
import PropTypes from 'prop-types'
import actions from '@/store/actions/thunk'

import css from '@/styles/index.scss'

@connect(state => state.thunk, actions)
class Thunk extends Component {
    constructor(props) {
        super(props)
        this.state = {
            total: 50,
            id: 509,
            page: 1
        }
    }

    componentDidMount() {
        console.log('请求了啊')
        const { id, page } = this.state
        this.props.fetchNewsType()
        this.props.fetchNewsList(id, page)
    }

    // 分页
    handlePagination = page => {
        this.setState({ page })
        this.props.fetchNewsList(this.state.id, page)
    }

    // 切换分类
    handleTabs = id => {
        this.setState({ id })
        this.props.fetchNewsList(id, this.state.page)
    }

    render() {
        const { newsType, newsList, isFetching, error } = this.props
        const { total, id, page } = this.state
        return (
            <div className={css.saga}>
            <ul className={css.tabs}>
                    {newsType &&
                        newsType.map((item, index) => (
                            <li
                            key={item.typeId}
                                className={`${item.typeId === id ? css.active : ''}`}
                            onClick={() => this.handleTabs(item.typeId)}>
                                {item.typeName}
                          </li>
                        ))}
              </ul>
                {isFetching && <div>加载中…</div>}
            {!isFetching && (
              <div>
                      <ul className={css.list}>
                            {newsList &&
                                newsList.map((item, index) => (
                                    <li key={item.newsId}>
                                    <Link to={`/detail/${item.newsId}`}>
                                        {index + 1}
、
                                        {item.title}
                                      </Link>
                                  </li>
                                ))}
                  </ul>
                      <Pagination
                          size="small"
                            onChange={this.handlePagination}
                          current={Number(page)}
                          total={total} />
                    </div>
                )}
                {error}
          </div>
        )
    }
}

Thunk.propTypes = {
    children: PropTypes.any,
    onClickOut: PropTypes.func
}
// export default connect(state => state.thunk)(Thunk);

export default Thunk
/* const mapStateToProps = state => {
    const { newsType, newsList, isFetching } = state.thunk;
    return {
        newsType,
        newsList,
        isFetching
    };
};
const mapDispatchToProps = dispatch => ({
    fetchNewsType: () => dispatch(actions.fetchNewsType()),
    fetchNewsList: id => dispatch(actions.fetchNewsList(id))
});
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Thunk); */
